<template>
    <el-dialog v-model="visible" width="400" align-center center :show-close="false">
        <div class="del-name">
            {{ name }}
        </div>
        <div class="del-tip">删除该{{ tip }}将不存在，是否删除？</div>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="emit('confirm')">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps(['visible', 'tip', 'name']);
const emit = defineEmits(['update:visible', 'confirm']);
const visible = computed({
    get() {
        return props.visible;
    },
    set(val) {
        emit('update:visible', val);
    }
})
</script>

<style lang="scss" scoped>
.del-name {
    border: 1px solid #DCDFE6;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
}

.del-tip {
    text-align: center;
    margin: 20px 0;
}
</style>